<template>
    <e-dialog :visible="clatex">
        <div class="latex-new-box">
            <div class="latex-new-box-hd">
                <a class="close" href="javascript:;" @click="close">x</a>
                <a data-id="2" class="on" href="javascript:;">插入公式</a>
            </div>
            <div class="latex-new-box-bd">
                <div class="pointchoice-hd">
                    <div class="latex-cate">
                        <ul class="latex-cate-list">
                            <li class="c1" @click.stop="showType('c1')">
                                <a></a>
                            </li>
                            <li class="c2" @click.stop="showType('c2')">
                                <a></a>
                            </li>
                            <li class="c3" @click.stop="showType('c3')">
                                <a></a>
                            </li>
                            <li class="c4" @click.stop="showType('c4')">
                                <a></a>
                            </li>
                            <li class="c5" @click.stop="showType('c5')">
                                <a></a>
                            </li>
                        </ul>
                        <div class="latexc latexc1" v-show="clatexType.c1">
                            <ul @click="chouseType('c1',$event)" @mouseleave="hideType('c1')">
                                <li data-math="\alpha " style="background-position:-0px -30px;"></li>
                                <li data-math="\beta " style="background-position:-18px -30px;"></li>
                                <li data-math="\gamma " style="background-position:-36px -30px;"></li>
                                <li data-math="\delta " style="background-position:-54px -30px;"></li>
                                <li data-math="\epsilon " style="background-position:-72px -30px;"></li>
                                <li data-math="\varepsilon " style="background-position:-90px -30px;"></li>
                                <li data-math="\zeta " style="background-position:-108px -30px;"></li>
                                <li data-math="\eta " style="background-position:-126px -30px;"></li>
                                <li data-math="\theta " style="background-position:-144px -30px;"></li>
                                <li data-math="\vartheta " style="background-position:-162px -30px;"></li>
                                <li data-math="\iota " style="background-position:-180px -30px;"></li>
                                <li data-math="\kappa " style="background-position:-198px -30px;"></li>
                                <li data-math="\lambda " style="background-position:-216px -30px;"></li>
                                <li data-math="\mu " style="background-position:-234px -30px;"></li>
                                <li data-math="\nu " style="background-position:-252px -30px;"></li>
                                <li data-math="\xi " style="background-position:-270px -30px;"></li>
                                <li data-math="\pi " style="background-position:-288px -30px;"></li>
                                <li data-math="\varpi " style="background-position:-306px -30px;"></li>
                                <li data-math="\rho " style="background-position:-324px -30px;"></li>
                                <li data-math="\varrho " style="background-position:-342px -30px;"></li>
                                <li data-math="\sigma " style="background-position:-360px -30px;"></li>
                                <li data-math="\varsigma " style="background-position:-378px -30px;"></li>
                                <li data-math="\tau " style="background-position:-396px -30px;"></li>
                                <li data-math="\upsilon " style="background-position:-414px -30px;"></li>
                                <li data-math="\phi " style="background-position:-432px -30px;"></li>
                                <li data-math="\varphi " style="background-position:-450px -30px;"></li>
                                <li data-math="\chi " style="background-position:-468px -30px;"></li>
                                <li data-math="\psi " style="background-position:-486px -30px;"></li>
                                <li data-math="\omega " style="background-position:-504px -30px;"></li>
                                <li data-math="\Gamma " style="background-position:-522px -30px;"></li>
                                <li data-math="\Delta " style="background-position:-540px -30px;"></li>
                                <li data-math="\Theta " style="background-position:-558px -30px;"></li>
                                <li data-math="\Lambda " style="background-position:-576px -30px;"></li>
                                <li data-math="\Xi " style="background-position:-594px -30px;"></li>
                                <li data-math="\Pi " style="background-position:-612px -30px;"></li>
                                <li data-math="\Sigma " style="background-position:-630px -30px;"></li>
                                <li data-math="\Upsilon " style="background-position:-648px -30px;"></li>
                                <li data-math="\Phi " style="background-position:-666px -30px;"></li>
                                <li data-math="\Psi " style="background-position:-684px -30px;"></li>
                                <li data-math="\Omega " style="background-position:-702px -30px;"></li>
                            </ul>
                        </div>
                        <div class="latexc latexc2" v-show="clatexType.c2">
                            <ul @click="chouseType('c2',$event)" @mouseleave="hideType('c2')">
                                <li data-math="\times " style="background-position:-0px -50px;"></li>
                                <li data-math="\div " style="background-position:-18px -50px;"></li>
                                <li data-math="\cdot " style="background-position:-36px -50px;"></li>
                                <li data-math="\pm " style="background-position:-54px -50px;"></li>
                                <li data-math="\mp " style="background-position:-72px -50px;"></li>
                                <li data-math="\ast " style="background-position:-90px -50px;"></li>
                                <li data-math="\star " style="background-position:-108px -50px;"></li>
                                <li data-math="\circ " style="background-position:-126px -50px;"></li>
                                <li data-math="\bullet " style="background-position:-144px -50px;"></li>
                                <li data-math="\oplus " style="background-position:-162px -50px;"></li>
                                <li data-math="\ominus " style="background-position:-180px -50px;"></li>
                                <li data-math="\oslash " style="background-position:-198px -50px;"></li>
                                <li data-math="\otimes " style="background-position:-216px -50px;"></li>
                                <li data-math="\odot " style="background-position:-234px -50px;"></li>
                                <li data-math="\dagger " style="background-position:-252px -50px;"></li>
                                <li data-math="\ddagger " style="background-position:-270px -50px;"></li>
                                <li data-math="\vee " style="background-position:-288px -50px;"></li>
                                <li data-math="\wedge " style="background-position:-306px -50px;"></li>
                                <li data-math="\cap " style="background-position:-324px -50px;"></li>
                                <li data-math="\cup " style="background-position:-342px -50px;"></li>
                                <li data-math="\aleph " style="background-position:-360px -50px;"></li>
                                <li data-math="\Re " style="background-position:-378px -50px;"></li>
                                <li data-math="\Im " style="background-position:-396px -50px;"></li>
                                <li data-math="\top " style="background-position:-414px -50px;"></li>
                                <li data-math="\bot " style="background-position:-432px -50px;"></li>
                                <li data-math="\infty " style="background-position:-450px -50px;"></li>
                                <li data-math="\partial " style="background-position:-468px -50px;"></li>
                                <li data-math="\forall " style="background-position:-486px -50px;"></li>
                                <li data-math="\exists " style="background-position:-504px -50px;"></li>
                                <li data-math="\neg " style="background-position:-522px -50px;"></li>
                                <li data-math="\angle " style="background-position:-540px -50px;"></li>
                                <li data-math="\triangle " style="background-position:-558px -50px;"></li>
                                <li data-math="\diamond " style="background-position:-576px -50px;"></li>
                            </ul>
                        </div>
                        <div class="latexc latexc3" v-show="clatexType.c3">
                            <ul @click="chouseType('c3',$event)" @mouseleave="hideType('c3')">
                                <li data-math="\leq " style="background-position:-0px -70px;"></li>
                                <li data-math="\geq " style="background-position:-18px -70px;"></li>
                                <li data-math="\prec " style="background-position:-36px -70px;"></li>
                                <li data-math="\succ " style="background-position:-54px -70px;"></li>
                                <li data-math="\preceq " style="background-position:-72px -70px;"></li>
                                <li data-math="\succeq " style="background-position:-90px -70px;"></li>
                                <li data-math="\ll " style="background-position:-108px -70px;"></li>
                                <li data-math="\gg " style="background-position:-126px -70px;"></li>
                                <li data-math="\equiv " style="background-position:-144px -70px;"></li>
                                <li data-math="\sim " style="background-position:-162px -70px;"></li>
                                <li data-math="\simeq " style="background-position:-180px -70px;"></li>
                                <li data-math="\asymp " style="background-position:-198px -70px;"></li>
                                <li data-math="\approx " style="background-position:-216px -70px;"></li>
                                <li data-math="\ne " style="background-position:-234px -70px;"></li>
                                <li data-math="\subset " style="background-position:-252px -70px;"></li>
                                <li data-math="\supset " style="background-position:-270px -70px;"></li>
                                <li data-math="\subseteq " style="background-position:-288px -70px;"></li>
                                <li data-math="\supseteq " style="background-position:-306px -70px;"></li>
                                <li data-math="\in " style="background-position:-324px -70px;"></li>
                                <li data-math="\ni " style="background-position:-342px -70px;"></li>
                                <li data-math="\notin " style="background-position:-360px -70px;"></li>
                            </ul>
                        </div>
                        <div class="latexc latexc4" v-show="clatexType.c4">
                            <ul @click="chouseType('c4',$event)" @mouseleave="hideType('c4')">
                                <li data-math="x_{a} " style="background-position:-0px -90px;"></li>
                                <li data-math="x^{b} " style="background-position:-30px -90px;"></li>
                                <li data-math="x_{a}^{b} " style="background-position:-60px -90px;"></li>
                                <li data-math="\bar{x} " style="background-position:-90px -90px;"></li>
                                <li data-math="\tilde{x} " style="background-position:-120px -90px;"></li>
                                <li data-math="\frac{a}{b} " style="background-position:-150px -90px;"></li>
                                <li data-math="\sqrt{x} " style="background-position:-180px -90px;"></li>
                                <li data-math="\sqrt[n]{x} " style="background-position:-210px -90px;"></li>
                                <li data-math="\bigcap_{a}^{b} " style="background-position:-240px -90px;"></li>
                                <li data-math="\bigcup_{a}^{b} " style="background-position:-270px -90px;"></li>
                                <li data-math="\prod_{a}^{b} " style="background-position:-300px -90px;"></li>
                                <li data-math="\coprod_{a}^{b} " style="background-position:-330px -90px;"></li>
                                <li data-math="\left( x \right) " style="background-position:-360px -90px;"></li>
                                <li data-math="\left[ x \right] " style="background-position:-390px -90px;"></li>
                                <li data-math="\left\{ x \right\} " style="background-position:-420px -90px;"></li>
                                <li data-math="\left| x \right| " style="background-position:-450px -90px;"></li>
                                <li data-math="\int_{a}^{b} " style="background-position:-480px -90px;"></li>
                                <li data-math="\oint_{a}^{b} " style="background-position:-510px -90px;"></li>
                                <li data-math="\sum_{a}^{b}{x} " style="background-position:-540px -90px;"></li>
                                <li data-math="\lim_{a \rightarrow b}{x} " style="background-position:-570px -90px;"></li>
                            </ul>
                        </div>
                        <div class="latexc latexc5" v-show="clatexType.c5">
                            <ul @click="chouseType('c5',$event)" @mouseleave="hideType('c5')">
                                <li data-math="\leftarrow " style="background-position:-0px -150px;"></li>
                                <li data-math="\rightarrow " style="background-position:-18px -150px;"></li>
                                <li data-math="\leftrightarrow " style="background-position:-36px -150px;"></li>
                                <li data-math="\Leftarrow " style="background-position:-54px -150px;"></li>
                                <li data-math="\Rightarrow " style="background-position:-72px -150px;"></li>
                                <li data-math="\Leftrightarrow " style="background-position:-90px -150px;"></li>
                                <li data-math="\uparrow " style="background-position:-108px -150px;"></li>
                                <li data-math="\downarrow " style="background-position:-126px -150px;"></li>
                                <li data-math="\updownarrow " style="background-position:-144px -150px;"></li>
                                <li data-math="\Uparrow " style="background-position:-162px -150px;"></li>
                                <li data-math="\Downarrow " style="background-position:-180px -150px;"></li>
                                <li data-math="\Updownarrow " style="background-position:-198px -150px;"></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="pointchoice-bd">
                    <textarea class="latexcnt" id="J-latexCnt" v-model="latexText" ></textarea> <!--@keydown="deleteForOneWord($event)"-->
                </div>
            </div>
            <div class="latex-new-box-ft">
                <a class="btn"  @click="insert()">插入</a>
                <div class="cnt">
                    <span class="ttl">预览</span>
                    <span class="latex" v-html="priviewImg"></span>
                </div> <input type="hidden" id="J_Latex"> </div>
        </div>
    </e-dialog>
</template>
<script>
const imgMaxHeight = 70;
export default {
    name: 'formulaDialog',
    props: {
        clatex: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            clatexType: {
                c1: false,
                c2: false,
                c3: false,
                c4: false,
                c5: false
            },
            latexcPic: [],
            latexText: '',
            latexTextTimer: null
        }
    },
    computed: {
        priviewImg() {
            this.latexText = this.latexText.replace(/[\u4e00-\u9fa5]+/g, '');
            if (this.latexText.trim()!='') {
                if (this.latexText.trim().length > 1000) {
                    return '';
                }
                return this.latexText ? `<img style="max-height:${imgMaxHeight}px" src="http://gs.xueleyun.com//cgi-bin/mathtex.cgi?${this.latexText}"/>` : '';
            } else {
                return '';
            }
            
        }
    },
    watch: {
        latexText(val, old) {
            if (!val) {
                this.latexText = '';
                this.latexcPic = [];
            }
            clearTimeout(this.latexTextTimer);
            this.latexTextTimer = setTimeout(() => {
                if (val.length > 1000) {
                    this.onOff = false;
                    this.$message.error('公式内容不能超过1000个字符');
                }
            }, 200)
        }
    },
    methods: {
        close() {
            this.$emit('update:clatex', false);
        },
        showType(type) {
            for (let key in this.clatexType) {
                this.clatexType[key] = false;
            }
            this.clatexType[type] = true;
        },
        hideType(type) {
            this.clatexType[type] = false;
        },
        chouseType(type, ev) {
            if (ev.target.tagName.toUpperCase() == 'LI') {
                // this['latexcPic'].push(ev.target.dataset.math)
                // this.latexText += ' ' +ev.target.dataset.math
                this.$nextTick(() => {
                    var textArea = document.getElementById('J-latexCnt');
                    this.insertText(textArea, ev.target.dataset.math);
                    this.latexText = textArea.value;
                })
            }
            // console.log(this.latexText);
            // this.latexText = this['latexcPic'].join(' ');
        },
        insert() {
            // console.log(this.latexText, this.priviewImg, 'this latexText')
            this.$emit('getPicData', {priviewImg: this.priviewImg, latexText: this.latexText});
            this.$emit('update:clatex', false);
            this.latexText = '';
            this.latexcPic = [];
        },
        insertText(obj, str) {
            if (document.selection) {
                var sel = document.selection.createRange();
                sel.text = str;
            } else if (typeof obj.selectionStart === 'number' && typeof obj.selectionEnd === 'number') {
                var startPos = obj.selectionStart,
                    endPos = obj.selectionEnd,
                    cursorPos = startPos,
                    tmpStr = obj.value;
                obj.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length);
                cursorPos += str.length;
                obj.selectionStart = obj.selectionEnd = cursorPos;
            } else {
                obj.value += str;
            }
        }

        // 删除
        // deleteForOneWord(event) {
        //     let element = document.getElementById('J-latexCnt');
        //     let position = element.selectionStart;
        //     let index = element.value.lastIndexOf(' ', position);

        //     console.log(position, index);  
        //     if (index !== -1) {
        //         if (event.keyCode == 8) {
        //             if ((position - index) >1) {
        //                 let str1 = element.value.substring(position-1, index);
        //                 console.log(str1);
        //                 element.value = element.value.replace(str1, '');
        //                 console.log('element.value', element.value);
        //             }
        //         }
        //     }
        // }


    }
}
</script>
<style lang="scss" scoped>
.latex-new-box {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .3);
    position: relative;
    .latex-new-box-hd {
        padding: 8px 10px 0;
        height: 40px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
        position: relative;
        z-index: 2;
        box-sizing: content-box;
        a {
            float: left;
            width: 90px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            color: #a8a8a8;
            font-size: 14px;
            cursor: pointer
        }
        a.on {
            border-bottom: 3px solid #ff5722;
            color: #212121;
            height: 40px;
            line-height: 40px
        }
        .close {
            float: right;
            color: #757575;
            width: 20px;
            margin-top: -10px;
            height: 48px;
            line-height: 48px;
            font-size: 20px;
            font-family: arial
        }
        .close:hover {
            color: #212121;
            height: 48px;
            line-height: 48px;
            font-size: 20px
        }
    }
    .latex-new-box-bd {
        height: 467px;
        overflow: hidden;
        position: relative;
        z-index: 1;
        .pointchoice-hd {
            height: 48px;
            line-height: 48px;
            background-color: #f1f1f1;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
            position: relative;
            z-index: 2;
        }
        .pointchoice-bd {
            width: 800px;
            height: 419px;
            background: #fff;
            position: relative;
            z-index: 1;
        }    
        .latex-cate {
            .latex-cate-list {
                padding-top: 14px;
                li {
                    list-style: none;
                    float: left;
                    margin-left: 20px;
                    padding-top: 0 !important;
                }
            }
            .latex-cate-list li.c1 a,
            .latex-cate-list li.c2 a,
            .latex-cate-list li.c3 a,
            .latex-cate-list li.c4 a,
            .latex-cate-list li.c5 a {
                background-image: url(../../../../assets/latex.png);
                display: block;
                width: 46px;
                height: 30px;
                overflow: hidden;
                cursor: pointer;
                border: 1px solid #f1f1f1
            }
        }
        .latexcnt {
            width: 744px;
            margin: 0 auto;
            height: 363px;
            border: 0 none;
            outline: 0;
            resize: none;
            padding: 28px;
            background: #fff;
            position: absolute;
            top: 0;
            left: 0
        }
    }
    .latex-new-box-ft {
        min-height: 84px;
        line-height: 84px;
        border-top: 1px solid #e0e0e0;
        background: #fff;
        padding: 0 24px;
        color: #757575;
        .cnt {
            width: 752px;
            overflow-y: hidden;
            overflow-x: auto;
        }
        span.ttl {
            font-size: 16px;
            margin-right: 20px
        }
        .latex img {
            max-height: 70px;
            width: auto;
            vertical-align: middle;
        }
        .latex-new-box .latex-new-box-ft .cnt {
            overflow: hidden;
            height: 84px
        }
        .btn {
            float: right;
            background: #4285f4;
            width: 100px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            border-radius: 3px;
            margin-top: 24px;
            color: #fff
        }
    }
}

.latex-new-box .latex-cate .latex-cate-list {
    li.c1 a {
        background-position: 0 0
    }
    li.c2 a {
        background-position: -46px 0
    }
    li.c3 a {
        background-position: -92px 0
    }
    li.c4 a {
        background-position: -138px 0
    }
    li.c5 a {
        background-position: -184px 0
    }
    li a:hover {
        border: 1px solid #f1f1f1
    }
}

.latex-new-box .latex-cate {
    .latexc1,
    .latexc2,
    .latexc3,
    .latexc4,
    .latexc5 {
        position: absolute;
        top: 40px;
        border: 1px solid #efefef;
        background: #fff;
        padding: 5px;
        ul {
            margin: 0;
            padding-left: 0
        }
        li {
            width: 20px;
            height: 20px;
            border: 1px solid #fff;
            display: block;
            overflow: hidden;
            float: left;
            background-image: url(../../../../assets/latex.png);
            cursor: pointer;
        }
        li:hover {
            border: 1px solid #999
        }

    }
    .latexc1 {
        left: 20px;
        ul {
            width: 154px;
            height: 132px
        }
    }
    .latexc2 {
        left: 92px;
        ul {
            width: 154px;
            height: 110px
        }
    }
    .latexc3 {
        left: 162px;
        ul {
            width: 154px;
            height: 66px
        }
    }
    .latexc4 {
        left: 224px;
        ul {
            width: 320px;
            height: 60px
        }
        li {
            width: 30px;
            height: 56px
        }
    }
    .latexc5 {
        left: 300px;
        ul {
            width: 264px;
            height: 22px
        }
    }
}
</style>